<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品列表</title>
    <link rel="stylesheet" href="css/shangpingliebiao.css">
</head>

<body>

    <div class="contanier">
        <div class="head" style="margin-top: -20rem;">
            <div class="til2">
                <div class="text2">
                    <span>10:27</span>
                    <img class="shijianbiaoblack" src="/2024/images/shijianbiaoblack.png">
                </div>
            </div>
            <div class="s">
                <a class="s1" href="indexpingpai.html"><img src="/2024/images/导航栏.png"></a>
                <div class="head2">
                    <div class="ss"><img src="/2024/images/搜索.png"></div>
                    <input type="text" id="keyInput" placeholder="搜索关键字" />
                </div>
            </div>
            <div class="sorts">
                <span class="sort active" data-sorted="0">综合</span>
                <span class="sort" data-sorted="1">销量</span>
                <span class="sort">价格
                    <img src="/2024/images/联合 6@2x.png" data-sorted="2" style="width: 15rem;height: 15rem;">
                    <img src="/2024/images/联合 7.png" data-sorted="3" style="width: 15rem;height: 15rem;">
                </span>
                <span class="sort" id="openDialog">全部品牌
                </span>
            </div>
        </div>

        <!-- 按品牌搜索 -->
        <div class="lm">
            <div id="dialog" class="dialog">
                <div class="head1" style="margin-top: -20rem;">
                    <div class="til2">
                        <div class="text2">
                            <span>10:27</span>
                            <img class="shijianbiaoblack" src="/2024/images/shijianbiaoblack.png">
                        </div>
                    </div>
                </div>
                <div class="s">
                    <a class="s1" href="brand.html"><img src="/2024/images/导航栏.png"></a>
                    <div class="kuang">
                        <div class="ss1"><img src="/2024/images/搜索.png"></div>
                        <div class="ss2">搜索关键字</div>
                    </div>
                </div>
                <div class="sorts">
                    <span class="sort active">综合</span>
                    <span class="sort">销量</span>
                    <span class="sort">价格
                        <img src="/2024/images/联合 6@2x.png" data-sorted="2" style="width: 15rem;height: 15rem;">
                        <img src="/2024/images/联合 7.png" data-sorted="3" style="width: 15rem;height: 15rem;">
                    </span>
                    <span class="sort" data-sorted="3">全部品牌</span>
                </div>
                <div id="dialogContent" class="dialogContent"></div>
                <div class="lm4">
                    <div class="lm4-1">重置</div>
                    <a class="lm4-2" href="shangpingliebiao.html">确定</a>
                </div>
                <div id="dialogCover" class="dialogCover"></div>
            </div>
   
        </div>      
            <div id="products"></div>
        
        <div class="di">
            <div class="di1"></div>
        </div>

    </div>
    <script type="text/javascript" src="js/shangpingliebiao.js"></script>
    <script type="text/javascript" src="js/demo1.js"></script>
</body>

</html>